<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery分页插件</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/one.css" />
    <link rel="stylesheet" href="css/two-page.css" />
    <style>
        body {
            margin: 0px;
            height: 100%;
            perspective: 1000px;
        }
        
        section {
            width: 500px;
            height: 500px;
            position: absolute;
            top: calc(50% - 200px);
            left: calc(50% - 200px);
            /*border: 1px solid black;*/
            perspective-origin: 50% 50%;
            transform-style: preserve-3d;
            animation: rotate 20s infinite linear;
        }
        
        section div {
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        
        section div:nth-child(1) {
            background-image: url(./images/2.jpg);
            transform: rotateY(0deg) translateZ(500px);
        }
        
        section div:nth-child(2) {
            background-image: url(images/3.jpg);
            transform: rotateY(60deg) translateZ(500px);
        }
        
        section div:nth-child(3) {
            background-image: url(images/4.jpg);
            transform: rotateY(120deg) translateZ(500px);
        }
        
        section div:nth-child(4) {
            background-image: url(images/5.jpg);
            transform: rotateY(180deg) translateZ(500px);
        }
        
        section div:nth-child(5) {
            background-image: url(images/6.jpg);
            transform: rotateY(240deg) translateZ(500px);
        }
        
        section div:nth-child(6) {
            background-image: url(images/7.jpg);
            transform: rotateY(300deg) translateZ(500px);
        }
        
        @keyframes rotate {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="container" data-PageSwitch>
        <div class="sections">
            <div class="section" id="section0">
                <!--<h3>This is the Page</h3>-->
                <div id="wrap" class="wrap">
                    <div class="photo" id="photo_{{index}}" onclick="turn(this)">
                        <div class="photo_wrap">
                            <div class="side side_front">
                                <div class="image">
                                    <img src="images/{{img}}" alt="{{alt}}" />
                                </div>
                                <div class="capation">{{caption}}
                                </div>
                            </div>
                            <div class="side side_back">
                                <div class="desc">
                                    {{desc}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section" id="section1">
                <!--<h3>This is the Page</h3>-->
                <div id="bg_music_btn" num='1' style="background-color: black;height: 100px;width: 100px;margin: 20px auto;">关闭背景音乐</div>

                <!--背景音乐-->

                <div id="bg_music"></div>

                <div class="slider">
                    <ul>
                        <li data-index="1">
                            <a href="#bg1">Hipster Fashion Haircut</a>
                        </li>
                        <li data-index="2">
                            <a href="#bg2">Cloud Computing Services &amp; Consulting</a>
                        </li>
                        <li data-index="3">
                            <a href="#bg3">My haire is sooo fantastic!</a>
                        </li>
                        <li data-index="4">
                            <a href="#bg4">Eat healthy &amp; excersice!</a>
                        </li>
                        <li data-index="5">
                            <a href="#bg5">Lips so kissable I could die ...</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="section" id="section2">
                <section>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </section>
            </div>
            <div class="section" id="section3">
                <h3>This is the Page</h3>
            </div>
        </div>
    </div>
</body>

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/page.js"></script>
<script src="js/myData.js"></script>
<script src="js/two-page.js"></script>
<script src="js/one.js"></script>
<script>
    $(document).ready(function() {
        $('#bg_music').append('<audio id="m_bg_music" loop="loop" preload="auto" autoplay="autoplay" src="music/1 .mp3" />');
        var mp3 = $('#m_bg_music')[0];

        $('#bg_music_btn').click(function() {
            var num = $('#bg_music_btn').attr('num');
            if (num == "1") {
                $('#bg_music_btn').attr('num', '0');
                mp3.pause();
            }
            if (num == "0") {
                $('#bg_music_btn').attr('num', '1');
                mp3.play();
            }
        });
    });
</script>

</html>